<!--
 * @Date: 2023-08-04 09:26:53
 * @LastEditors: 景冰川 961166897@qq.com
 * @LastEditTime: 2023-08-23 16:59:15
 * @FilePath: \veteran-cadre-app\src\components\home\dev-load.vue
-->
<script setup lang="ts">
const props = defineProps({
  title: {
    type: String,
    default: '该功能正在开发中！',
  },
})
const emit = defineEmits(['onOpen', 'onClose'])
const popupRef = ref(null)
function open() {
  popupRef.value.open('center')
  emit('onOpen')
}
function close() {
  popupRef.value.close()
  emit('onClose')
}
defineExpose({
  open,
  close,
})
</script>

<template>
  <uni-popup ref="popupRef" background-color="transparent">
    <view class="popup-content">
      <div class="relative h-292px w-270px">
        <div class="tips">
          温馨提示
        </div>
        <div class="texts">
          {{ props.title }}
        </div>
        <image
          class="block absolute h-292px w-270px z-2"
          src="../../static/images/mine/dev-load-bg.png"
          mode="scaleToFill"
        />
        <div class="icon-box">
          <image
            class="icon"
            src="../../static/images/mine/dev-load-icon.png"
            mode="scaleToFill"
          />
        </div>
      </div>
      <button class="button" @click="close">
        我知道了
      </button>
    </view>
  </uni-popup>
</template>

<style lang="scss" scoped>
.popup-content{
  background-color: transparent;
  position: relative;
}
.tips{
  z-index: 5;
  position: absolute;
  top: -40rpx;
  left: 14rpx;
  width: 256rpx;
  height: 88rpx;
  line-height: 72rpx;
  text-align: center;
  background: linear-gradient(135deg, #4FAE98 0%, #5FCF92 100%);
  box-shadow: 0px 4px 10px 0px rgba(31,108,90,0.3);
  border-radius: 60rpx;
  border: 8rpx solid #FFFFFF;
  font-weight: 600;
  font-size: 48rpx;
  color: white;
}
.texts{
  z-index: 5;
  position: absolute;
  top: 106rpx;
  font-size: 40rpx;
  color: #333333;
  left: 32rpx;
  font-weight: 600;

}
.icon-box{
  position: absolute;
  z-index: 5;
  bottom: 64rpx;
  left:30rpx;
  right: 30rpx;
  width: 480rpx;
  height: 320rpx;
  background: linear-gradient(135deg, #5FCF92 0%, #4FAE98 100%);
  box-shadow: 0px 4px 10px 0px rgba(31,108,90,0.3);
  border-radius: 32rpx;
  .icon{
    display: block;
    width: 300rpx;
    height: 300rpx;
    margin: 0 auto;
  }
}
.button{
  width: 320rpx;
  height: 112rpx;
  line-height: 112rpx;
  margin-top: 48rpx;
  font-size: 48rpx;
  color: white;
  font-weight: 600;
  background: linear-gradient(135deg, #4FAE98 0%, #5FCF92 100%);
  box-shadow: 0px 2px 2px 0px rgba(170.3761088848114,255,235.40290117263794,1), inset 0px 2px 4px 0px rgba(0,127.5,97.97364637255669,1);
  border-radius: 60rpx;
}
</style>
